<template>
    <fieldset>
        <legend>失效函数的应用</legend>
        <h1 id="content">{{content}}</h1>
        <button :class="{active:index+1===page}" v-for="(btn,index) in buttons" :key="index" @click="pageChange(index+1)">第{{index+1}}页</button>
    </fieldset>
</template>
<script setup>
import {ref,onMounted,reactive,watchEffect} from "vue"
import CancelPromise from "./cancelPromise"

    //声明3个按钮
    
    let buttons = reactive(['第1页','第2页','第3页'])

    //模拟3个请求，响应的时间不一样

    let api1 = signal=> new CancelPromise((resolve,reject) => {
        setTimeout(() => {
            resolve('第一页的数据')
        },1000)
    },signal)

    let api2 = signal=> new CancelPromise((resolve,reject) => {
        setTimeout(() => {
            resolve('第二页的数据')
        },1500)
    },signal)

    let api3 = signal=> new CancelPromise((resolve,reject) => {
        setTimeout(() => {
            resolve('第三页的数据')
        },2000)
    },signal)

    //怎么取消(中断)promise? 在promise内部直接抛出异常(throw error,new DOMExpection())

    //模拟请求
    let api = {
        api1,   //1000
        api2,   //1500
        api3    //2000
    }

    //声明一个响应式的变量

    let content = ref('')

    //点击分页获取分页数据
    //声明一个三方的响应式变量来作为 按钮的激活条件
    let page = ref(1)
    let pageChange = (pageSize)=>{
        
        //给三方作为激活条件的变量进行赋值
        page.value = pageSize
    }


    //封装一个获取内容的方法
    /**
     * 
     * @param {Number} pageSize   传递给后台的页码
     * @param {Object} signal     控制器(AbortController)的sognal对象
     */
    // @param {数据类型} 参数      参数的描述
    let fetchData = (pageSize=1,signal) => (
        api['api'+pageSize](signal)
        .then(res=>{
            console.log(res)
            content.value = res
        })
    )


    //使用watchEffect

    watchEffect(invalidate =>{
        //声明一个控制器
        let abortController = new AbortController();
        //获取signal对象
        let signal = abortController.signal;
        //发起请求，并且传入signal对象
        fetchData(page.value,signal)
        invalidate(()=>{
            //页面切换之前，取消上一个promise
            abortController.abort()
        })
    })


    //页面加载的时候，获取第一页的数据

    // onMounted(()=>{
    //     fetchData()
    // })
</script>
<style>
    .active{
        background-color: deepskyblue;
    }
</style>